<template>
  <div>{{ count }}</div>
  <button @click="increment">actions自增</button>
  <button @click="patch">$patch自增</button>
  <div>----------------------异步Actions</div>
  <div>{{ successCom }}</div>
  <button @click="promisetest">异步Actions</button>
  <button @click="patchsuccess">$patch修改success</button>
  <div>----------------------getters</div>
  <div>doubleCount：{{ doubleCount }}--{{ threeCount }}</div>
  <div>successGetter：{{ successGetter }}</div>
</template>
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
import { computed } from "vue";
const store = useCounterStore();
const { count, doubleCount, success, successGetter,threeCount } = storeToRefs(store);
const { increment, promiseEx } = store;
const successCom = computed(() => store.success);
const patch = () => {
  //   store.$patch((state) => {
  //     state.count = state.count + 2;
  //   });
  store.$patch({
    count: store.count + 2,
  });
};
const patchsuccess = () => {
  store.$patch({
    success: !store.success,
  });
};

const promisetest = async () => {
  try {
    const res = await promiseEx();
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};
</script>
